<template>
  <div style="color: #666;font-size: 14px;padding:15px;position: relative;">
<!--    <div style="padding-bottom: 20px;font-size: 22px;">-->
<!--      <b>欢迎你！{{ user.nickname }}！</b>-->
<!--    </div>-->
    <div class="jieshao" >
      <h1 style="font-size: 22px;padding-left: 55px;margin: 15px 10px 5px 0px">交通大数据综合可视化管理平台</h1>
      <span style="display:block;padding-left: 55px;padding-bottom: 8px">当前版本：v1.0.0（该平台在持续维护中，相关工具与搜索正在更新，感谢大家的支持）   </span>
      <span style="display:inline-block;padding-left: 820px;"></span>
      <span style="display:inline-block;color: #00CCFF;background-color:#102E44;width: 520px;text-align: center">Transportation big data comprehensive visualization management platform</span>
      <div style="width: 93%;margin-left: 55px;margin-top:30px">
        <p style="font-size: 16px;">
          大数据可视化平台是将公众交通行为所产生的多源大数据中进行信息挖掘，并将得到的信息以兼具科学性和美观性的原则进行可视化展示；该平台不是仅仅针对某种特定数据进行可视化分析，而是将可视化分析功能作为组件工具，通过用户自主上传数据平台协助管理及可视化分析。管理指对用户上传数据的增删改查，可视化分析指平台通过对用户上传数据进行判断并给出相关可视化推荐。
        </p>
      </div>
    </div>

    <div class="xiaoguo">
      <h1 style="position: absolute;top:-25px;left:60px;font-size: 22px;color: #ffffff">效果示例图</h1>
      <div @click="gotolinktaxiTrace" class="taxinTrace">
        <div class="shuomingImg1"></div>
        <div class="shuoming">
          <b>三维轨迹图：</b>根据车辆运行路线在地图上绘制出相应的三维路线图，同时定义状态的颜色赋给线路。
        </div>
      </div>
      <div @click="gotolinkThreeDimensional" class="ThreeDimensional">
        <div class="shuomingImg2"></div>
        <div class="shuoming">
          <b>三维柱状图：</b>通过热力映射数据分布情况，颜色和高度体现出车辆密度。数量等级八个等级，分别用不同的颜色来表示。
        </div>
      </div>
      <div @click="gotolinkScatterDiagram" class="ScatterDiagram">
        <div class="shuomingImg3"></div>
        <div class="shuoming">
          <b>散点图：</b>将所有的数据以点的形式展现在地图上,帮助我们从宏观的角度快速看出不同地理位置上数据的分布特征。
        </div>
      </div>
      <div @click="gotolinkGrid" class="Grid">
        <div class="shuomingImg4"></div>
        <div class="shuoming">
          <b>网格图：</b>将展示区域划分为100x100的网格，统计每个网格内的出租车数据数量，并对其进行展示，数量等级分为8个等级......。
        </div>
      </div>
      <div @click="gotolinkodLine" class="odLine">
        <div class="shuomingImg5"></div>
        <div class="shuoming">
          <b>OD流飞线图：</b>是一种用于表示地理空间数据之间移动量的可视化方式......
        </div>
      </div>
      <div @click="gotolinkAggregation" class="Aggregation">
        <div class="shuomingImg6"></div>
        <div class="shuoming">
          <b>聚合图：</b>将界面窗口中的数据点的个数进行统计，在每个单元格内显示颜色和数字......
        </div>
      </div>
      <div @click="gotolinkHot" class="Hot">
        <div class="shuomingImg7"></div>
        <div class="shuoming">
          <b>热力图：</b>是使用不同的颜色表示车辆的密度，颜色越深表示车辆越密集。使用红色代表最高密度，蓝色或紫色代表最低密度
        </div>
      </div>
      <div @click="gotolinkSvector" class="Svector">
        <div class="shuomingImg8"></div>
        <div class="shuoming">
          <b>向量场：</b>是将车辆的运动方向和速度以向量的形式处理和投影计算，绘制流线完成向量场可视化模型，从而反映出车辆的拥堵趋势、聚集状态
        </div>
      </div>
    </div>

<!--    <el-row :gutter="30">-->
<!--      <el-col :span="12">-->
<!--        <div class="block" style="margin: 20px 0">-->
<!--          <el-carousel trigger="click" height="240px">-->
<!--            <el-carousel-item v-for="item in imgList" :key="item.id">-->
<!--              <el-col :span="16"><img :src="item.idView" @click="video(item)" style="cursor: pointer; width: 480px; margin: 0 auto;"/></el-col>-->
<!--            </el-carousel-item>-->
<!--          </el-carousel>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <div style="padding: 20px 0; font-size: 20px">技术栈</div>-->
<!--        <el-row>-->
<!--          <el-col :span="12" style="line-height: 30px">-->
<!--            <div><b>后端</b></div>-->
<!--            <div>SpringBoot2</div>-->
<!--            <div>Hutool</div>-->
<!--            <div>Poi</div>-->
<!--            <div>Lombok</div>-->
<!--            <div>Mybatis/Mybatis-plus</div>-->
<!--          </el-col>-->
<!--          <el-col :span="12" style="line-height: 30px">-->
<!--            <b>前端</b>-->
<!--            <div>Vue3</div>-->
<!--            <div>Vue-Router</div>-->
<!--            <div>VueX</div>-->
<!--            <div>ElementUI</div>-->
<!--            <div>Axios</div>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    <div style="height: 1px; background: #ddd; margin: 50px 0"/>-->

    <div class="md-container">
      <h2>数据上传操作方式：</h2>
      <!--    数据上传操作方式-->
      <p style="text-align:start;line-height:2">1、数据格</p>
      <p style="text-align:start;line-height:2">
        支持格式为xlsx，需要保证为UTF-8编码，请上传有明确表头的，标准行列的一维表格数据，请勿上传带有合并单元格的数据，会出现数据读取失败。</p>
      <p style="text-align:start;line-height:2">2、表头读取</p>
      <p style="text-align:start;line-height:2">
        系统默认读取数据中的第一行作为表头，为了在后续编辑中方便操作和识别，请开发者正确命名表头。</p>
      <p style="text-align:start;line-height:2">3、数据分隔符</p>
      <p style="text-align:start;line-height:2">
        系统在数据读取时，默认以英文逗号（,）作为分隔符，其他类型的分隔符会导致数据上传失败。</p>
      <p style="text-align:start;line-height:2">
        经纬度字段需要使用英文双引号（""）将数据引用，否则系统在读取数据时，会作为两个字段进行处理。</p>
      <p style="text-align:start;line-height:2">4、核心数据字段</p>
      <p style="text-align:start;line-height:2">
        位置数据可视化必须依赖经纬度才可以在地图上进行数据绘制，所以上传的数据中必须包含经纬度的字段</p>
      <p style="text-align:start;line-height:2">5、经纬度字段数据格式</p>
<!--点类型数据-->
      <p style="text-align:start;line-height:2">
        1）点类型数据
          <el-button size="small"  class="Button" @click="downloadDemoPoint">下载点数据模板</el-button>
      </p>
      <p style="text-align:start;line-height:2">
        经纬度数据格式为：[运营公司],[车辆ID],[时间],[经度],[纬度],[路链ID],[速度],[方向],[乘车状态],[车辆状态],[表名]经纬度在不同的两列，示例数据如下：</p>
      <table border="1" class="md-table  "
             style="width:98%;border:1px solid #dddddd;border-collapse:collapse;text-align:start;line-height:1.5">
        <tbody>
        <tr>
<!--          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5;">ID()</p></td>-->
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">运营公司(OPERA)</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">车辆ID(CID)</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">时间(TIME)</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">经度(LNG)</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">维度(LAT)</p></td>
<!--          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">网格ID(GRID)</p></td>-->
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">路链ID(ROAD)</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">速度(SPEED)</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">方向(DIRECT)</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">乘车状态(HSTATE)</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">车辆状态(CSTATE)</p></td>
<!--          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">其他(OTHER)</p></td>-->
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">表名(nameTable)</p></td>
        </tr>
        <tr>
<!--          <td><p style="line-height:1.5">5370959</p></td>-->
          <td><p style="line-height:1.5">$JYJ</p></td>
          <td><p style="line-height:1.5">13311581041</p></td>
          <td><p style="line-height:1.5">20080130080755</p></td>
          <td><p style="line-height:1.5">116.244</p></td>
          <td><p style="line-height:1.5">39.8491</p></td>
<!--          <td><p style="line-height:1.5">428543286</p></td>-->
          <td><p style="line-height:1.5">6146904209</p></td>
          <td><p style="line-height:1.5">0</p></td>
          <td><p style="line-height:1.5">4</p></td>
          <td><p style="line-height:1.5">0</p></td>
          <td><p style="line-height:1.5">4</p></td>
          <td><p style="line-height:1.5">出租车数据1</p></td>
        </tr>
        <tr>
<!--          <td><p style="line-height:1.5">5370946</p></td>-->
          <td><p style="line-height:1.5">$JYJ</p></td>
          <td><p style="line-height:1.5">13311486583</p></td>
          <td><p style="line-height:1.5">20080130080754</p></td>
          <td><p style="line-height:1.5">116.304</p></td>
          <td><p style="line-height:1.5">39.9622</p></td>
<!--          <td><p style="line-height:1.5">428767115</p></td>-->
          <td><p style="line-height:1.5">147321257</p></td>
          <td><p style="line-height:1.5">25</p></td>
          <td><p style="line-height:1.5">250</p></td>
          <td><p style="line-height:1.5">1</p></td>
          <td><p style="line-height:1.5">4</p></td>
          <td><p style="line-height:1.5">出租车数据1</p></td>
        </tr>
        <tr>
<!--          <td><p style="line-height:1.5">5370959</p></td>-->
          <td><p style="line-height:1.5">$JYJ</p></td>
          <td><p style="line-height:1.5">13311581041</p></td>
          <td><p style="line-height:1.5">20080130080755</p></td>
          <td><p style="line-height:1.5">116.244</p></td>
          <td><p style="line-height:1.5">39.8491</p></td>
<!--          <td><p style="line-height:1.5">428543286</p></td>-->
          <td><p style="line-height:1.5">6146904209</p></td>
          <td><p style="line-height:1.5">47</p></td>
          <td><p style="line-height:1.5">98</p></td>
          <td><p style="line-height:1.5">2</p></td>
          <td><p style="line-height:1.5">4</p></td>
          <td><p style="line-height:1.5">出租车数据1</p></td>
        </tr>
        <tr>
<!--          <td><p style="line-height:1.5">…</p></td>-->
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
<!--          <td><p style="line-height:1.5">…</p></td>-->
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">出租车数据1</p></td>
        </tr>
        <tr>
<!--          <td><p style="line-height:1.5">5370930</p></td>-->
          <td><p style="line-height:1.5">$JYJ</p></td>
          <td><p style="line-height:1.5">13311581041</p></td>
          <td><p style="line-height:1.5">20080130080755</p></td>
          <td><p style="line-height:1.5">116.504</p></td>
          <td><p style="line-height:1.5">40.0094</p></td>
<!--          <td><p style="line-height:1.5">429504249</p></td>-->
          <td><p style="line-height:1.5">147495264</p></td>
          <td><p style="line-height:1.5">0</p></td>
          <td><p style="line-height:1.5">268</p></td>
          <td><p style="line-height:1.5">2</p></td>
          <td><p style="line-height:1.5">4</p></td>
          <td><p style="line-height:1.5">出租车数据1</p></td>
        </tr>
        </tbody>
      </table>
<!-- 轨迹线数据类型-->
      <p style="text-align:start;line-height:2">
        2）轨迹线数据
          <el-button size="small" class="Button" @click="downloadDemoLine">下载轨迹线数据模板</el-button>
      </p>
      <p style="text-align:start;line-height:2">
        数据格式为：[时间戳],[载客状态],[经度],[纬度],[表名]，OD点的经纬度在不同的两列，示例数据如下：</p>
      <table border="1" class="md-table  "
             style="width:98%;border:1px solid #dddddd;border-collapse:collapse;text-align:start;line-height:1.5">
        <tbody>
        <tr>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">time</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">status</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">lng</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">lat</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">nameTable</p></td>
        </tr>
        <tr>
          <td><p style="line-height:1.5">346</p></td>
          <td><p style="line-height:1.5">2</p></td>
          <td><p style="line-height:1.5">116.387</p></td>
          <td><p style="line-height:1.5">39.9497</p></td>
          <td><p style="line-height:1.5">Car00001</p></td>
        </tr>
        <tr>
          <td><p style="line-height:1.5">429</p></td>
          <td><p style="line-height:1.5">0</p></td>
          <td><p style="line-height:1.5">116.439</p></td>
          <td><p style="line-height:1.5">39.9499</p></td>
          <td><p style="line-height:1.5">Car00001</p></td>
        </tr>
        <tr>
          <td><p style="line-height:1.5">433</p></td>
          <td><p style="line-height:1.5">0</p></td>
          <td><p style="line-height:1.5">116.313</p></td>
          <td><p style="line-height:1.5">39.8951</p></td>
          <td><p style="line-height:1.5">Car00001</p></td>
        </tr>
        </tbody>
      </table>
<!-- OD线数据类型-->
      <p style="text-align:start;line-height:2">
        3）OD线数据
          <el-button size="small" class="Button" @click="downloadDemoOD">下载OD线数据模板</el-button>
      </p>
      <p style="text-align:start;line-height:2">
        数据格式为：[起点经度],[起点纬度],[终点经度],[终点纬度],[地区名],[表名]，OD点的经纬度在不同的四列，示例数据如下：</p>
      <table border="1" class="md-table  "
             style="width:98%;border:1px solid #dddddd;border-collapse:collapse;text-align:start;line-height:1.5">
        <tbody>
        <tr>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">olng</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">olat</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">dlng</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">dlat</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">nameDistrict</p></td>
          <td style="background:rgba(9, 43, 67,0.63)"><p style="line-height:1.5">nameTable</p></td>
        </tr>
        <tr>
          <td><p style="line-height:1.5">116.426</p></td>
          <td><p style="line-height:1.5">39.954</p></td>
          <td><p style="line-height:1.5">116.387</p></td>
          <td><p style="line-height:1.5">39.9497</p></td>
          <td><p style="line-height:1.5">dongcheng</p></td>
          <td><p style="line-height:1.5">OD线数据1</p></td>
        </tr>
        <tr>
          <td><p style="line-height:1.5">116.444</p></td>
          <td><p style="line-height:1.5">39.9089</p></td>
          <td><p style="line-height:1.5">116.439</p></td>
          <td><p style="line-height:1.5">39.9499</p></td>
          <td><p style="line-height:1.5">dongcheng</p></td>
          <td><p style="line-height:1.5">OD线数据1</p></td>
        </tr>
        <tr>
          <td><p style="line-height:1.5">116.357</p></td>
          <td><p style="line-height:1.5">39.8974</p></td>
          <td><p style="line-height:1.5">116.313</p></td>
          <td><p style="line-height:1.5">39.8951</p></td>
          <td><p style="line-height:1.5">xicheng</p></td>
          <td><p style="line-height:1.5">OD线数据1</p></td>
        </tr>
        <tr>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
          <td><p style="line-height:1.5">…</p></td>
        </tr>
        <tr>
          <td><p style="line-height:1.5">116.456</p></td>
          <td><p style="line-height:1.5">39.9552</p></td>
          <td><p style="line-height:1.5">116.42</p></td>
          <td><p style="line-height:1.5">40.0384</p></td>
          <td><p style="line-height:1.5">chaoyang</p></td>
          <td><p style="line-height:1.5">OD线数据1</p></td>
        </tr>
        </tbody>
      </table>

      <p style="text-align:start;line-height:2">4）面类型数据</p>
      <p style="text-align:start;line-height:2">
        面数据类型需要上传的格式为：Shapefile文件</p>
      <p style="text-align:start;line-height:2">6、数据量与文件大小</p>
      <p style="display:block;padding-bottom: 50px">
        单份数据文件，最多包含5万行数据，且文件大小需要小于5M，超过限制会导致数据上传失败。</p></div>


    <el-dialog style="background-color: #ffffff00; box-shadow: 0 0px 0px rgb(0 0 0);"
               :visible.sync="dialogVisible"
               width="70%">
      <div class='video'>
        <video-player class="video-player-box" ref="videoPlayer" :playsinline="true"
                      :options="playerOptions"></video-player>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
import {serverIp} from "../../../public/config";

export default {
  name: "Home",
  components: {
    videoPlayer
  },
  data() {
    return {
      dialogVisible: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: true, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4", // 类型
          src: '' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      imgList: [
        {
          id: 0,
          name: '交通大数据可视化平台',
          idView: `http://${serverIp}/file/交通大数据可视化平台.png`,
          videoUrl: `http://${serverIp}/file/交通大数据（无水印）.mp4`
        },
        {
          id: 1,
          name: '应急指挥大数据平台',
          idView: `http://${serverIp}/file/北京交通应急.png`,
          videoUrl: `http://${serverIp}/file/交通行业应急大数据.mp4`
        },
        {
          id: 2,
          name: '南锣鼓巷风险监测平台',
          idView: `http://${serverIp}/file/南锣.png`,
          videoUrl: `http://${serverIp}/file/南锣录屏.mp4`
        }
      ]

    }
  },
  methods: {
    video(item) {
      this.dialogVisible = true;
      this.playerOptions.sources[0].src = item.videoUrl
      // this.$alert(
      //     '<div style="height: 75% ;"><video-player class="video-player-box" ref="videoPlayer" :playsinline="true" :options="playerOptions" /></div>', item.name, {
      //   dangerouslyUseHTMLString: true,
      //   confirmButtonText: '关闭',
      // });
    },
    gotolinktaxiTrace(){
      this.$router.replace('/taxiTrace')
    },
    gotolinkThreeDimensional(){
      this.$router.replace('/ThreeDimensional')
    },
    gotolinkScatterDiagram(){
      this.$router.replace('/ScatterDiagram')
    },
    gotolinkGrid(){
      this.$router.replace('/Grid')
    },
    gotolinkodLine(){
      this.$router.replace('/odLine')
    },
    gotolinkAggregation(){
      this.$router.replace('/Aggregation')
    },
    gotolinkHot(){
      this.$router.replace('/Hot')
    },
    gotolinkSvector(){
      this.$router.replace('/Svector')
    },

      downloadDemoPoint() {
          window.location.href="./static/点数据模板.xlsx"
      },

      downloadDemoLine() {
          window.location.href="./static/轨迹线数据模板.xlsx"
      },

      downloadDemoOD() {
          window.location.href="./static/OD线数据123.xlsx"
      },
  }
}
</script>

<style lang="less" scoped>
img {
  position: relative;
  left: 75%;
  transform: translateX(-50%);
}
.jieshao{
  /*flex-wrap: nowrap;*/
  margin-left: 28px;
  margin-top: 20px;
  width: 95%;
  height: 240px;
  background-image: url("../../assets/image/Home/kuang111.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff ;
  overflow: auto;

}
.xiaoguo {
  position: relative;
  top:40px;
  width: 95%;
  background-image: url("../../assets/image/Home/kuang2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-left: 28px;
  padding: 40px 50px;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  color: #333333 ;
  .taxinTrace:hover{
    cursor: pointer;
  }
  .ThreeDimensional:hover{
    cursor: pointer;
  }
  .ScatterDiagram:hover{
    cursor: pointer;
  }
  .Grid:hover{
    cursor: pointer;
  }
  .odLine:hover{
    cursor: pointer;
  }
  .Aggregation:hover{
    cursor: pointer;
  }
  .Hot:hover{
    cursor: pointer;
  }
  .Svector:hover{
    cursor: pointer;
  }
  .shuomingImg1{
    width: 299px;
    height: 204px;
    margin-top: 20px;
    background-image: url("../../assets/image/Home/1taxiTrace.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .shuomingImg2{
    width: 299px;
    height: 204px;
    margin-top: 20px;
    background-image: url("../../assets/image/Home/2threeDimensional.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .shuomingImg3{
       width: 299px;
       height: 204px;
       margin-top: 20px;
       background-image: url("../../assets/image/Home/3scatterDiagram.png");
       background-size: 100% 100%;
       background-repeat: no-repeat;
  }
  .shuomingImg4{
    width: 299px;
    height: 204px;
    margin-top: 20px;
    background-image: url("../../assets/image/Home/4grid.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .shuomingImg5{
    width: 299px;
    height: 204px;
    margin-top: 20px;
    background-image: url("../../assets/image/Home/5ODLine.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .shuomingImg6{
       width: 299px;
       height: 204px;
       margin-top: 20px;
       background-image: url("../../assets/image/Home/6aggregation.png");
       background-size: 100% 100%;
       background-repeat: no-repeat;
  }
  .shuomingImg7{
    width: 299px;
    height: 204px;
    margin-top: 20px;
    background-image: url("../../assets/image/Home/7hot.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .shuomingImg8{
    width: 299px;
    height: 204px;
    margin-top: 20px;
    background-image: url("../../assets/image/Home/8svector.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .shuoming{
    width: 299px;
    height: 70px;
    background-color: white;
  }
}

.md-container{
  position: relative;
  top:80px;
  left:28px;
  width: 95%;
  background-image: url("../../assets/image/Home/kuang3.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  padding-left: 50px;
}
.el-message-box {
  display: inline-block;
  padding-bottom: 10px;
  vertical-align: middle;
  background-color: #FFF;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  font-size: 18px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  text-align: left;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.Button {
    background-color: #4682B4;
    color: #000000;
    padding: 5px 8px;
    margin-left: 1%;
    border: none;
}
</style>